<template>
  <div class="order_body">
    <nut-navbar
      @on-click-back="back"
      title="订单结算"
    > </nut-navbar>
    <div class="address_card">
      <div class="msg">
        <h3>{{ currentAddress.name }}</h3>
        <p>{{ currentAddress.phone }}</p>
      </div>
      <div class="address">
        <img
          src="../assets/images/address.png"
          alt=""
        />
        <nut-cell
          is-link
          @click="state.showAddress = true"
        >
          <h3>{{ currentAddress.area_name }} {{ currentAddress.desc }}</h3>
          <p>收货不便时，选择下方服务网点，可享免费代收服务。</p>
        </nut-cell>
        <nut-popup
          position="bottom"
          closeable
          close-icon-position="top-left"
          :style="{ height: '60%' }"
          v-model:visible="state.showAddress"
        >
          <div class="title1">选择收货地址</div>
          <addressListCom
            @currentAddress="getCurrentAddress"
            :num="num"
          ></addressListCom>
        </nut-popup>
        <span>></span>
      </div>
      <div class="checkMsg">
        <img
          src="../assets/car.png"
          alt=""
        />
        <p>发送商品及物流动态(含取件码)给收货人</p>
        <label class="container">
          <input
            type="checkbox"
            v-model="checked"
            @click="checkedChange"
          />
          <div class="checkmark"></div>
        </label>
      </div>
    </div>

    <div
      class="goods_card"
      v-for="item in orderList"
      :key="item.id"
    >
      <div class="title">OMINI定制</div>
      <div class="goods_detail">
        <img
          :src="item.s_good.s_goods_photos[0].path"
          alt=""
        />
        <div class="detail">
          <div class="goods_name">
            <p>{{ item.s_good.name }}</p>
            <div class="pn">
              <span>¥{{ item.s_good.price }}</span>
              <span>x{{ item.num }}</span>
            </div>
          </div>
          <div class="parameter">
            <p>淡金色 【10cm】</p>
          </div>
        </div>
      </div>

      <table>
        <tr class="prefer">
          <td>
            <h3>优惠券</h3>
          </td>
          <td>
            <nut-cell
              is-link
              @click="state.showPrefer = true"
            >
              <p>满500减20</p>
              <span>></span>
            </nut-cell>
            <nut-popup
              position="bottom"
              closeable
              close-icon-position="top-left"
              :style="{ height: '60%' }"
              v-model:visible="state.showPrefer"
              pop-class="pop2"
            >
              <div class="title2">
                <span @click="state.showPrefer = false">x</span>
                <p>选择优惠券</p>
              </div>
              <div class="empty"></div>
              <preferCard></preferCard>
              <div class="empty"></div>
              <div class="button">
                <button @click="state.showPrefer = false">确定</button>
              </div>
            </nut-popup>
          </td>
        </tr>
        <tr class="distribution">
          <td><span>配送方式</span></td>
          <td>
            <div class="right">
              <span>普通配送</span>
              <span>快递免邮</span>
              <span>></span>
            </div>
          </td>
        </tr>
        <tr class="insurance">
          <td><span>运费险</span></td>
          <td>
            <span>确认收货前退货可赔付9元</span>
            <span>￥ 1.2元 </span>
            <label class="container">
              <input type="checkbox" />
              <div class="checkmark"></div>
            </label>
          </td>
        </tr>
        <tr class="note">
          <td>
            <h3>订单备注</h3>
          </td>
          <td>
            <input
              type="text"
              placeholder="选填，请先和商家协商一致"
            />
          </td>
        </tr>
      </table>

      <div class="num_price">
        <p>共1件</p>
        <span>小计</span>
        <h3>￥{{ item.s_good.price * item.num - 20 }}</h3>
      </div>
    </div>

    <div class="anonymous">
      <label class="container">
        <input type="checkbox" />
        <div class="checkmark"></div>
      </label>
      <span>匿名购买</span>
    </div>

    <div class="footer">
      <span>共{{ totalNum }}件，</span>
      <span>合计：</span>
      <span>￥{{ totalPrice }}</span>
      <nut-cell
        is-link
        @click="state.showBottom = true"
      >
        <button @click="pay">提交订单</button>
      </nut-cell>
      <nut-popup
        position="bottom"
        closeable
        close-icon-position="top-left"
        :style="{ height: '60%' }"
        v-model:visible="state.showBottom"
      >
        <div class="title3">确认付款</div>
        <div class="total_price">
          <span>¥</span>
          <h3>{{ totalPrice.toFixed(2) }}</h3>
        </div>
        <div class="content">
          <div class="account">
            <span>支付宝账号</span>
            <span>134******80</span>
          </div>
          <div class="pay_way">
            <span>付款方式</span>
            <span>花呗 ></span>
          </div>
        </div>
        <div class="confirm">
          <img
            src="../assets/images/fingerprint.png"
            alt=""
          />
          <span>请验证指纹或者 </span>
          <h3 @click="pay">输入密码</h3>
        </div>
      </nut-popup>
    </div>
  </div>
</template>

<script>
import { addOrder } from '@/api/order.js'
import { getCartData } from '@/api/product.js'
import preferCard from '@/components/preferCardCom.vue'
import { getMyAddress } from "../api/address";

export default {
  components: {
    preferCard,
  },
  data () {
    return {
      checked: true,
      state: { showAddress: false, showPrefer: false, showBottom: false },
      orderList: [],
      totalNum: 0,
      totalPrice: 0,
      // 添加订单的地址 id
      addr_id: "",
      // 当前选择的地址
      currentAddress: "",
      // 控制地址列表激活态
      num: 0,
    };
  },
  async created () {
    const { data } = await getCartData()
    console.log(this.$route.params.list);
    console.log(this.$store.state.goodsList);
    // 通过路由传参，拿到购物车中勾选的商品添加到orderList中
    // 从购物车路径过来，判断传过来的id是否与商品购物车id相等
    if (this.$route.params.list.length > 0) {
      this.orderList = []
      data.result.forEach(e => {
        this.$route.params.list.forEach(f => {
          if (f == e.id) {
            this.orderList.push(e)
          }
        })
      })
    } else {
      // 从商品详情页过来，显示id为3393的商品
      this.$store.state.goodsList.forEach(e => {
        if (e.id == 3393) {
          this.orderList = []
          this.orderList.push(
            {
              id: e.id,
              s_good: { s_goods_photos: [{ path: e.s_goods_photos[0].path }], name: e.name, price: e.price },
              num: 1
            })
        }
      })
    }
    // 计算商品总数和总价
    this.orderList.forEach((e) => {
      this.totalNum += e.num;
      this.totalPrice += e.s_good.price * e.num;
    });
    this.totalPrice -= 20;
  },
  async mounted () {
    // 获取用户的地址列表数据
    const { data } = await getMyAddress();
    console.log(data);
    data.result.some((ele, index) => {
      // 没有默认地址，则使用第一个
      if (index == 0) {
        this.currentAddress = ele;
        this.addr_id = ele.id
      }
      // 若有默认地址，就直接使用
      if (ele.default_set == "1") {
        this.currentAddress = ele;
        this.addr_id = ele.id
        return true;
      }
    });

  },
  methods: {
    // 返回按钮
    back () {
      this.$router.back()
      // 获取订单列表数据
      // getOrderList().then(res => {
      //   console.log(res);
      // res.data.result.rows.forEach(e => {
      // 删除订单
      // deleteOrder(e.id).then(res => {
      //   console.log(res);
      // })
      // })
      // }).catch(err => {
      //   console.log(err);
      // })
    },
    pay () {
      console.log(this.$store.state.cartList);
      console.log(this.$route.params.list);
      // 结算成功时，从购物车中删除该商品
      // if (this.$route.params.list.length > 0) {
      //   this.$route.params.list.forEach((id) => {
      //     deleteCart(id)
      //       .then((res) => {
      //         console.log(res);
      //       })
      //       .catch((err) => {
      //         console.log(err);
      //       });
      //   });
      // }
      // 添加商品订单
      let cartId = []
      let goods = []
      this.orderList.forEach(e => {
        cartId.push(e.id)
        goods.push({ id: e.goods_id, num: e.num })
        addOrder(
          goods,
          this.addr_id,
          cartId
        ).then(res => {
          console.log(res);
          // 保存订单id
          this.$store.commit('addOrderId', res.data.result.id)
        }).catch(err => {
          console.log(err);
        })
      })
      console.log(cartId, goods, this.orderId);
      // 跳转至订单结算成功界面
      this.$router.push('/paysuccess')
    },
    // 拿到子组件传递来的数据
    getCurrentAddress (val) {
      // 地址信息
      this.currentAddress = val.addressInfo;
      // 地址id
      this.addr_id = val.addressInfo.id;
      // 修改激活态
      this.num = val.n;
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .nut-navbar__title {
  font-weight: 700;
  font-size: 16px;
  color: #1e1e1e;
}
.order_body {
  background-color: rgba(234, 233, 229, 1);
}
.nut-navbar {
  background-color: rgba(234, 233, 229, 1);
  margin-bottom: 10px;
  width: 100vw;
  position: fixed;
  top: 0;
}
.address_card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 345px;
  height: 177px;
  padding: 10px;
  box-sizing: border-box;
  margin: 45px auto 0;
  background: inherit;
  background-color: rgba(255, 255, 255, 1);
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  border-radius: 16px;
  .msg {
    display: flex;
    align-items: center;
    margin-left: 56px;
    height: 22px;
    h3 {
      font-size: 14px;
      font-weight: 400;
    }
    p {
      margin-left: 10px;
      font-weight: 400;
      font-size: 12px;
      color: #999999;
      text-align: center;
    }
  }
  .address {
    display: flex;
    align-items: center;
    height: 100px;
    img {
      width: 40px;
      height: 40px;
    }
    .nut-cell {
      box-shadow: none;
      display: flex;
      flex-direction: column;
      margin-right: 10px;
      h3 {
        font-size: 14px;
        font-weight: 400;
        height: 40px;
      }
      p {
        margin-top: 10px;
        font-weight: 400;
        font-size: 12px;
        color: #d1082a;
      }
    }

    span {
      font-size: 20px;
      color: #333333;
    }
  }
  .checkMsg {
    display: flex;
    align-items: center;
    margin-left: 10px;

    img {
      width: 20px;
      height: 20px;
      transform: rotateY(180deg);
      margin-right: 10px;
    }
    p {
      font-weight: 400;
      font-size: 14px;
      // margin-left: 10px;
    }
    .container input {
      position: absolute;
      opacity: 0;
      cursor: pointer;
      height: 0;
      width: 0;
    }
    .container {
      display: block;
      position: relative;
      cursor: pointer;
      font-size: 15px;
      user-select: none;
      margin-left: 10px;
    }
    .checkmark {
      position: relative;
      top: 0;
      left: 0;
      height: 20px;
      width: 20px;
      background-color: #fff;
      border: 0.5px solid #999999;
      border-radius: 25px;
      transition: 0.15s;
    }
    .container input:checked ~ .checkmark {
      background-color: #e0be8f;
      border-radius: 25px;
      transition: 0.15s;
    }
    .checkmark:after {
      content: "";
      position: absolute;
      display: none;
    }
    .container input:checked ~ .checkmark:after {
      display: block;
    }
    .container .checkmark:after {
      left: 0.45em;
      top: 0.25em;
      width: 0.25em;
      height: 0.5em;
      border: solid white;
      border-width: 0 0.15em 0.15em 0;
      transform: rotate(45deg);
    }
  }
}
// 弹出层样式
.nut-popup {
  .title1 {
    width: 100vw;
    height: 50px;
    background-color: #fff;
    text-align: center;
    z-index: 999;
    font-weight: 400;
    font-size: 16px;
    line-height: 50px;
  }
  .title2 {
    width: 100vw;
    height: 50px;
    background-color: #fff;
    text-align: center;
    position: fixed;
    z-index: 999;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 50px;
    display: flex;
    align-items: center;
    span {
      font-size: 30px;
      position: absolute;
      left: 10px;
      top: 0px;
    }
    p {
      font-weight: 400;
      font-size: 16px;
      line-height: 50px;
      text-align: center;
      position: fixed;
      left: 50%;
      transform: translateX(-50%);
    }
  }
  .title3 {
    width: 100vw;
    height: 60px;
    background-color: #fff;
    text-align: center;
    z-index: 999;
    font-weight: 400;
    font-size: 16px;
    line-height: 60px;
  }
  .empty {
    height: 50px;
  }
  .button {
    height: 60px;
    width: 100vw;
    background-color: #fff;
    position: fixed;
    z-index: 999;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    button {
      width: 345px;
      height: 36px;
      background-color: rgba(240, 213, 184, 1);
      border: none;
      border-radius: 173px;
      color: #fff;
    }
  }
  .default_address {
    width: 345px;
    height: 89px;
    background-color: #c1ab96;
    box-sizing: border-box;
    padding: 10px;
    border-radius: 5px;
    margin: 20px auto 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .detailed {
      display: flex;
      flex-direction: column;
      .name_num {
        display: flex;
        align-items: center;
        h3 {
          font-weight: 700;
          font-size: 16px;
          color: #ffffff;
        }
        p {
          margin-left: 20px;
          font-weight: 400;
          font-size: 12px;
          color: #ffffff;
        }
      }
      .address {
        color: #ffffff;
        line-height: 20px;
        font-size: 14px;
        width: 240px;
      }
    }
    .choose {
      width: 60px;
      height: 40px;
      border-left: 1px dashed #ffffff;
      text-align: center;

      span {
        line-height: 40px;
        font-weight: 400;
        font-size: 12px;
        color: #ffffff;
      }
    }
  }
  .select_address {
    width: 345px;
    height: 89px;
    background-color: #ffffff;
    box-sizing: border-box;
    padding: 10px;
    border-radius: 5px;
    border-bottom: 1px solid #f2f2f2;
    margin: 20px auto 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .detailed {
      display: flex;
      flex-direction: column;
      .name_num {
        display: flex;
        align-items: center;
        h3 {
          font-weight: 700;
          font-size: 16px;
        }
        p {
          margin-left: 20px;
          font-weight: 400;
          font-size: 12px;
        }
      }
      .address {
        line-height: 20px;
        font-size: 14px;
        width: 240px;
      }
    }
    .choose {
      width: 60px;
      height: 40px;
      border-left: 1px dashed #d2d2d2;
      text-align: center;

      span {
        line-height: 40px;
        font-weight: 400;
        font-size: 12px;
      }
    }
  }
  // .prefer_card {
  //     width: 340px;
  //     height: 135px;
  //     margin: 10px auto;
  //     display: flex;
  //     justify-content: space-around;
  //     .left {
  //         width: 230px;
  //         display: flex;
  //         flex-direction: column;
  //         align-items: center;
  //         justify-content: center;
  //         background-color: #debb8c;
  //         border-radius: 0 10px 10px 0;
  //         h3 {
  //             font-weight: 700;
  //             font-size: 24px;
  //             color: #f6f4ea;
  //         }
  //         h5 {
  //             font-weight: 400;
  //             font-size: 12px;
  //             color: #d1082a;
  //             display: inline-block;
  //             width: 70%;
  //             text-align: center;
  //             background-color: #c1ab96;
  //         }
  //     }
  //     .right {
  //         width: 110px;
  //         display: flex;
  //         flex-direction: column;
  //         align-items: center;
  //         justify-content: center;
  //         background-color: #debb8c;

  //         border-radius: 10px 0 0 10px;
  //         .box {
  //             height: 70%;
  //             width: 100%;
  //             border-left: 1px dashed #f6f4ea;
  //             display: flex;
  //             flex-direction: column;
  //             align-items: center;
  //             justify-content: center;
  //             h3 {
  //                 font-size: 14px;
  //                 color: #f6f4ea;
  //             }
  //             h5 {
  //                 font-size: 14px;
  //                 color: #f6f4ea;
  //             }
  //         }
  //     }
  // }
  .total_price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    margin-top: 30px;
    span {
      font-weight: 400;
      font-size: 26px;
      color: #3e3e3e;
    }
    h3 {
      font-weight: 700;
      font-size: 50px;
      color: #3e3e3e;
    }
  }
  .content {
    width: 100vw;
    box-sizing: border-box;
    padding: 0 20px 0 20px;
    margin-top: 20px;
    .account {
      display: flex;
      justify-content: space-between;
      height: 40px;
      span:nth-child(1) {
        font-weight: 400;
        font-size: 16px;
        color: #999999;
      }
      span:nth-child(2) {
        font-weight: 400;
        font-size: 16px;
      }
    }
    .pay_way {
      display: flex;
      justify-content: space-between;
      height: 40px;
      span:nth-child(1) {
        font-weight: 400;
        font-size: 16px;
        color: #999999;
      }
      span:nth-child(2) {
        font-weight: 400;
        font-size: 16px;
      }
    }
  }
  .confirm {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 85px;
    // position: absolute;
    // bottom: 20px;
    // left: 50%;
    // transform: translateX(-50%);
    img {
      width: 25px;
      height: 25px;
    }
    span {
      font-weight: 400;
      font-size: 16px;
      color: #999999;
    }
    h3 {
      font-weight: 400;
      font-size: 16px;
      color: #43a0ed;
    }
  }
}
.goods_card {
  width: 345px;
  height: 330px;
  padding: 10px;
  box-sizing: border-box;
  margin: 20px auto 0;
  background-color: rgba(255, 255, 255, 1);
  border: none;
  border-radius: 16px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  display: flex;
  flex-direction: column;
  .title {
    font-weight: 400;
    font-size: 14px;
  }
  .goods_detail {
    display: flex;
    justify-content: space-around;
    img {
      width: 100px;
      height: 100px;
    }
    .detail {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .goods_name {
        display: flex;
        width: 210px;
        p {
          font-size: 14px;
          font-weight: 400;
          width: 140px;
          /* 超出范围隐藏 */
          overflow: hidden;
          /* 文字超出用省略号 */
          text-overflow: ellipsis;
          /* 盒子模型 */
          display: -webkit-box;
          /* 显示的文本行数 */
          -webkit-line-clamp: 2;
          /* 子元素的垂直排列方式 */
          -webkit-box-orient: vertical;
        }
        .pn {
          margin-left: 20px;
          display: flex;
          flex-direction: column;
          font-weight: 400;
          font-size: 14px;
          color: #999999;
          text-align: right;
        }
      }
      .parameter {
        width: 210px;
        height: 46px;
        background-color: rgba(242, 242, 242, 1);
        p {
          color: #999999;
          font-size: 14px;
          font-weight: 400;
          line-height: 46px;
        }
      }
    }
  }
  table {
    margin-top: 10px;
    margin-left: 50px;
    height: 200px;
    tr {
      td:nth-child(1) {
        text-align: right;
        width: 60px;
      }
      td:nth-child(2) {
        padding: 0 0 0 10px;
      }
    }
    .prefer {
      h3 {
        font-size: 14px;
        font-weight: 400;
      }
      .nut-cell {
        height: 22px;
        padding: 0;
        margin: 0;
        box-shadow: none;
        display: flex;
        justify-content: space-between;
        align-items: center;
        p {
          font-weight: 400;
          font-size: 13px;
          color: #999999;
        }
        span {
          font-weight: 400;
          font-size: 14px;
          color: #999999;
        }
      }
    }
    .distribution {
      td:nth-child(1) {
        span {
          font-size: 14px;
          font-weight: 400;
        }
      }
      .right {
        display: flex;
        justify-content: space-between;
        span:nth-child(1) {
          font-weight: 400;
          font-size: 13px;
          color: #999999;
          margin-right: 60px;
        }
        span:nth-child(2) {
          font-weight: 400;
          font-size: 13px;
        }
        span:nth-child(3) {
          font-weight: 400;
          font-size: 13px;
          color: #999999;
        }
      }
    }

    .insurance {
      height: 48px;
      td:nth-child(1) {
        font-size: 14px;
        font-weight: 400;
        margin-right: 10px;
      }
      td:nth-child(2) {
        display: flex;
        justify-content: space-between;
        span:nth-child(1) {
          width: 80px;
          font-weight: 400;
          font-size: 13px;
          color: #999999;
          width: 112px;
          // line-height: 1.2em;
        }
        span:nth-child(2) {
          font-weight: 400;
          font-size: 13px;
          margin-right: 5px;
        }
        .container input {
          position: absolute;
          opacity: 0;
          cursor: pointer;
          height: 0;
          width: 0;
        }
        .container {
          display: block;
          position: relative;
          cursor: pointer;
          font-size: 15px;
          user-select: none;
          margin-left: 10px;
        }
        .checkmark {
          position: relative;
          top: 0;
          left: 0;
          height: 15px;
          width: 15px;
          background-color: #fff;
          border: 0.5px solid #999999;
          border-radius: 25px;
          transition: 0.15s;
        }
        .container input:checked ~ .checkmark {
          background-color: #e0be8f;
          border-radius: 25px;
          transition: 0.15s;
        }
        .checkmark:after {
          content: "";
          position: absolute;
          display: none;
        }
        .container input:checked ~ .checkmark:after {
          display: block;
        }
        .container .checkmark:after {
          left: 0.35em;
          top: 0.15em;
          width: 0.25em;
          height: 0.5em;
          border: solid white;
          border-width: 0 0.15em 0.15em 0;
          transform: rotate(45deg);
        }
      }
    }
    .note {
      h3 {
        font-size: 14px;
        font-weight: 400;
      }
      input {
        width: 200px;
        border: none;
      }
    }
  }
  .num_price {
    display: flex;
    align-items: center;
    text-align: right;
    align-self: flex-end;
    p {
      color: #cccccc;
      font-size: 14px;
    }
    span {
      font-weight: 400;
      font-size: 14px;
    }
    h3 {
      font-weight: 400;
      font-size: 14px;
      color: #d1082a;
    }
  }
}
.anonymous {
  display: flex;
  align-items: center;
  margin-top: 10px;
  margin-left: 20px;
  margin-bottom: 60px;
  .container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
  }
  .container {
    display: block;
    position: relative;
    cursor: pointer;
    font-size: 15px;
    user-select: none;
    margin-left: 10px;
  }
  .checkmark {
    position: relative;
    top: 0;
    left: 0;
    height: 15px;
    width: 15px;
    background-color: #fff;
    border: 0.5px solid #999999;
    border-radius: 25px;
    transition: 0.15s;
  }
  .container input:checked ~ .checkmark {
    background-color: #e0be8f;
    border-radius: 25px;
    transition: 0.15s;
  }
  .checkmark:after {
    content: "";
    position: absolute;
    display: none;
  }
  .container input:checked ~ .checkmark:after {
    display: block;
  }
  .container .checkmark:after {
    left: 0.35em;
    top: 0.15em;
    width: 0.25em;
    height: 0.5em;
    border: solid white;
    border-width: 0 0.15em 0.15em 0;
    transform: rotate(45deg);
  }
  span {
    font-weight: 400;
    font-size: 16px;
    color: #515151;
  }
}
.footer {
  width: 100vw;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: end;
  background-color: #fff;
  position: fixed;
  bottom: 0;
  span:nth-child(1) {
    font-weight: 400;
    color: #cccccc;
    font-size: 16px;
  }
  span:nth-child(2) {
    font-weight: 400;
    font-size: 16px;
  }
  span:nth-child(3) {
    font-weight: 400;
    font-size: 16px;
    color: #ff0000;
    margin-right: 5px;
  }
  .nut-cell {
    padding: 0;
    width: 85px;
    margin-right: 5px;
    button {
      width: 85px;
      height: 30px;
      background-color: rgba(240, 213, 184, 1);
      border: none;
      border-radius: 33px;
      color: #fff;
    }
  }
}
</style>